<template>
  <div class="dashboard">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon device-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.totalDevices }}</div>
              <div class="stat-label">设备总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon treatment-icon">
              <el-icon><Operation /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.todayTreatments }}</div>
              <div class="stat-label">今日治疗</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon rate-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.completionRate }}%</div>
              <div class="stat-label">治疗完成率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card title="治疗趋势分析">
          <template #header>
            <div class="card-header">
              <span>治疗趋势分析</span>
              <el-select style="width: 120px;" v-model="treatmentPeriod" @change="loadTreatmentChart" size="small">
                <el-option label="最近7天" value="7" />
                <el-option label="最近30天" value="30" />
                <el-option label="最近90天" value="90" />
              </el-select>
            </div>
          </template>
          <TreatmentChart :data="chartData.treatments" :loading="chartLoading.treatments" />
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
              <el-select style="width: 120px;" v-model="userPeriod" @change="loadUserChart" size="small">
                <el-option label="最近7天" value="7" />
                <el-option label="最近30天" value="30" />
                <el-option label="最近90天" value="90" />
              </el-select>
            </div>
          </template>
          <UserChart :data="chartData.users" :loading="chartLoading.users" />
        </el-card>
      </el-col>
    </el-row>

 
    <!-- 最近治疗记录 -->
    <el-row class="recent-section">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近治疗记录</span>
              <el-button type="primary" size="small" @click="$router.push('/treatments')">
                查看全部
              </el-button>
            </div>
          </template>
          <RecentTreatments :treatments="recentTreatments" :loading="loadingRecent" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { User, Monitor, Operation, TrendCharts } from '@element-plus/icons-vue'
import TreatmentChart from '@/components/charts/TreatmentChart.vue'
import UserChart from '@/components/charts/UserActivityChart.vue'
import DeviceStatusChart from '@/components/charts/DeviceStatusChart.vue'
import TreatmentModeChart from '@/components/charts/TreatmentModeChart.vue'
import RealtimeActivity from '@/components/dashboard/RealtimeActivity.vue'
import RecentTreatments from '@/components/dashboard/RecentTreatments.vue'
import { getDashboardStats, getTreatmentTrends, getUserTrends, getRecentTreatments } from '@/api/dashboard'

// 响应式数据
const stats = ref({
  totalUsers: 0,
  totalDevices: 0,  // 添加设备总数
  onlineDevices: 0,
  todayTreatments: 0,
  completionRate: 0
})

const chartData = ref({
  treatments: [],
  users: [],
  deviceStatus: [],
  treatmentModes: []
})

const chartLoading = ref({
  treatments: false,
  users: false
})

const recentTreatments = ref([])
const realtimeActivities = ref([])
const loadingRecent = ref(false)

const treatmentPeriod = ref('30')
const userPeriod = ref('30')

// WebSocket连接用于实时数据
let websocket: WebSocket | null = null

// 方法
const loadDashboardStats = async () => {
  try {
    const response = await getDashboardStats()
    
    stats.value = response
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

const loadTreatmentChart = async () => {
  chartLoading.value.treatments = true
  try {
    const response = await getTreatmentTrends(treatmentPeriod.value)
    chartData.value.treatments = response
  } catch (error) {
    console.error('加载治疗趋势失败:', error)
  } finally {
    chartLoading.value.treatments = false
  }
}

const loadUserChart = async () => {
  chartLoading.value.users = true
  try {
    const response = await getUserTrends(userPeriod.value)
    
    chartData.value.users = response
  } catch (error) {
    console.error('加载用户趋势失败:', error)
  } finally {
    chartLoading.value.users = false
  }
}

const loadRecentTreatments = async () => {
  loadingRecent.value = true
  try {
    const response = await getRecentTreatments(10)
    recentTreatments.value = response?.records || []
  } catch (error) {
    console.error('加载最近治疗记录失败:', error)
  } finally {
    loadingRecent.value = false
  }
}


// 生命周期
onMounted(() => {
  loadDashboardStats()
  loadTreatmentChart()
  loadUserChart()
  loadRecentTreatments()
  
  // 定时刷新统计数据  
  onUnmounted(() => {
    
  })
})
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
  
  .stats-cards {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          .el-icon {
            font-size: 24px;
            color: white;
          }
          
          &.user-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.device-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.treatment-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.rate-icon {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            line-height: 1;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }
  }
  
  .charts-section {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .realtime-section {
    margin-bottom: 20px;
  }
  
  .recent-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>